<template>
  
  <div>
    <h2 style="padding-left: 50px;">账户中心</h2>
    <div class="infobox">
      
      <div class="leftbox">
        <div >
          <span>总资产(元)</span>
          <p >10,052,769.08</p>
        </div>
        <div>
          <span>总市值(元)</span>
          <p>0.00</p>
        </div>
        <div>
          <span>总盈亏(元)</span>
          <p style="color: #F93C5E ;">52,769.08</p>
        </div>
        <div>
          <span>当日盈亏(元)</span>
          <p style="color: #1AC5DC;">0.00</p>
        </div>
        
        

      </div>
      <div class="rightbox">
        <div id="splitData" ref="splitData"></div>
      </div>
    </div>
    <h2 style="padding-left: 50px;">策略列表</h2>
    <div class="centerbox" >
          <el-table
           :row-style="tableRowStyle"
          :header-cell-style="{background:'#141e32',color: '#1AC5DC'}"
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="date"
              label="策略名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="name"
              label="总收益"
              width="180">
            </el-table-column>
            <el-table-column
              prop="address"
              label="年收益">
            </el-table-column>
            <el-table-column
              prop="address1"
              label="季收益">
            </el-table-column>
            <el-table-column
              prop="address2"
              label="月收益">
            </el-table-column>
            <el-table-column
              prop="address3"
              label="日收益">
            </el-table-column>
            <el-table-column
              prop="address4"
              label="创建时间">
            </el-table-column>
          </el-table>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data(){
    return{
    
        tableData: [{
            date: '大盘选择',
            name: '265431',
            address: '546516',
            address1: '5165',
            address2: '54165',
            address3: '68',
            address4: '21',
          }, {
            date: 'AI短线',
            name: '6546126',
            address: '5465',
            address: '41621',
            address1: '451655',
            address2: '321',
            address3: '684',
            address4: '32',
          }, {
            date: 'AI指标',
            name: '21465',
            address: '684615',
            address: '65165',
            address1: '65165',
            address2: '547',
            address3: '368',
            address4: '74',
          }, {
            date: '板块选择',
            name: '546516',
            address: '545161',
            address: '65165',
            address1: '651',
            address2: '6545',
            address3: '65156',
            address4: '584',
        }],
        stockboxOption : {
          tooltip: {
              trigger: 'axis',
              position: function (pt) {
                  return [pt[0], '10%'];
              }
          },
          title: {
              left: 'center',
              text: '收益',
              textStyle:{//图例文字的样式
                color:'#1AC5DC',
                fontSize:12,
                
            }
          },
          legend: {
            left:'left',
            data: ['舆情指数', '泸深300'],
            textStyle:{//图例文字的样式
                color:'#fff',
                fontSize:12,
                
            }
          },
          // toolbox: {
          //     feature: {
          //         dataZoom: {
          //             yAxisIndex: 'none'
          //         },
          //         restore: {},
          //         saveAsImage: {}
          //     }
          // },
          xAxis: {
              type: 'category',
              boundaryGap: false,
              data: "",
              axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
          },
          yAxis: {
              type: 'value',
              boundaryGap: [0, '100%'],
              axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色

                }
              },
          },
          dataZoom: [{
              type: 'inside',
              start: 0,
              end: 10
            }, {
              start: 0,
              end: 10,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '80%',
              handleStyle: {
                  color: '#fff',
                  shadowBlur: 3,
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
              }
          }],
          series: [
              {
                  name:'舆情指数',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  sampling: 'average',
                  itemStyle: {
                    normal:{
                      color: 'RGB(212, 114, 111)'
                    }
                      
                  },
                  areaStyle: {
                    normal:{
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'RGB(212, 114, 111)'
                      }, {
                          offset: 1,
                          color: 'RGB(212, 114, 111)'
                      }])
                    }
                      
                  },
                  data: ""
              },
              {
                  name:'泸深300',
                  type:'line',
                  smooth:true,
                  symbol: 'none',
                  sampling: 'average',
                  itemStyle: {
                    normal:{
                      color: 'RGB(109, 125, 135)'
                    }
                      
                  },
                  areaStyle: {
                    normal:{
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: 'RGB(109, 125, 135)'
                      }, {
                          offset: 1,
                          color: 'RGB(109, 125, 135)'
                      }])
                    }
                      
                  },
                  data: ""
              }
          ]
        }
    }
  },
  mounted(){
    this.stockboxload()
      this.stockbox = echarts.init(document.getElementById('splitData'))
      this.stockbox.setOption(this.stockboxOption)
  },
  methods: {

tableRowStyle({ row, rowIndex }) {
      return 'background-color: #141e32'
    },




     stockboxload(){
        var base = +new Date(2010, 9, 3);
        var oneDay = 24 * 3600 * 100;
        var date = [];

        var data = [Math.random() * 300];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        var data1 = [Math.random() * 200];

        for (var i = 1; i < 20000; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
        }

        this.stockboxOption.xAxis.data = date
        this.stockboxOption.series[0].data = data
        this.stockboxOption.series[1].data = data1
        console.log(this.stockboxOption,"ddddddddd")
    }



    }




}
</script>

<style scoped lang='less'>
  .infobox{
    height: 330px;
    /* padding-top: 10px; */
    /* border-top: 2px solid #eaedf4; */
    padding-left: 50px;
    /* margin-top: 20px; */
    /* border-bottom: 8px solid #eaedf4; */
  }
  .infobox div{
    /* width: 40%; */
    float: left;
    
  }
  .cell{
    color: #1AC5DC!important; 
  }
  .rightbox{
      width: 60%;
      background-color: #080c1b;
  }
  .leftbox{
      background-color: #080c1b;
      width: 38%;
      margin-right: 2%;
      padding-top: 91px;
  } 
  .leftbox div {
      height: 100px;
      width: 50%;
      float: left;
  }
  .leftbox div span{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  }
.leftbox div p {
  font-family: DINMittelschrift;
    font-size: 30px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
  
}
.centerbox{
  width: 90%;
  background-color: #080c1b;
      /* padding-top: 10px; */
    /* border-top: 1px solid #17a3b9; */
    margin: 0 3% 0 3%;
    padding: 2%;
}
#splitData{
/* margin-bottom: 100px; */
    width: 90%;
    height: 300px;
    margin: 0 auto;
}
</style>
